<template>
  <div id="app">                    
    <v-header :seller="seller"></v-header>
    <div class="tab border-1px">
      <div class="tab-item">
        <router-link to="/goods">商品</router-link> 
        <!-- 建立路由指向，自带一个a标签了   -->
       </div>
      <div class="tab-item">
        <router-link to="/ratings"> 评价</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller"> 商家</router-link>
      </div>
    </div>
    <keep-alive>
    <router-view :seller="seller"></router-view>  
    </keep-alive>
    <!-- 以上为一个公用空间，点了哪个路由就把该空间让给那个路由指向的页面 
    在该公用空间绑定seller数据，进入该空间的各路由界面都能使用seller数据-->
  </div>
</template>

<script>
  import header from './components/header/header.vue'

  const ERR_OK=0;

  export default{
    data() {
      return{                          //声明seller数据
        seller: {
          
        }
      };
    },
    created(){                         //请求到seller数据
      this.$http.get('/api/seller').then((response) => {
         console.log(response.data)
        
          this.seller=response.data.data;
        
      });
    },
    components:{
      'v-header':header    //header是es6默认标签，要改名字
    }
  }
</script>

    

<style lang="stylus">
  @import "./common/stylus/mixin"    
    // 引入的css类函数
  #app
    .tab
      display flex
      width 100%
      height 40px
      line-height 40px
      // border-bottom 1px solid rgba(7,17,27,0.1)
      border-1px(rgba(7,17,27,0.1))
      .tab-item
        flex 1
        text-align center
        &>a
          display block
          font-size 14px
          color rgb(77,85,93)
          &.router-link-exact-active     /* 被点到的路由自动添加该类， */
            color rgb(240,20,20)


</style>


